<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			.navtop{
				width: 300px;
				height: 50px;
				display: flex;
				justify-content: space-around;
				border: 1px solid red;
				border-radius: 25px;
				margin: 0 auto;
				position:relative;
			}
			.navtop>div{
				height: 100%;
				width: 30%;			
				text-align: center;
				line-height: 50px;
			}
			.scolltop{
				position: absolute;
				/* height: 100%;
				width: 30%;	 */
				background-color: pink;
				opacity: 0.5;
				border-radius: 25px;
				border: 1px solid red;
				left: 5px;
				transition: all 0.5s ease-in-out;
			}
			.content{
				width: 300px;
				height: 500px;
				border: 1px solid red;
				margin: 0 auto;
				display: flex;
				overflow: hidden;
			}
			.content>div{
				width: 300px;
				height: 100%;
				border: 1px solid green;
				flex-shrink: 0;
				transition: all 0.5s ease-in-out;
			}
			.home-click{
				margin-left: 0px;
			}
			.about-click{
				margin-left: -300px;
			}
			.detail-click{
				margin-left: -600px;
			}
		</style>
	</head>
	<body>
		<div class="navtop">
			<div class="navtop-item1">home</div>
			<div class="navtop-item2">about</div>
			<div class="navtop-item3">detail</div>
			<div class="scolltop">
				
			</div>
		</div>
		<div class="content">
			<div class="content-home">home</div>
			<div class="content-about">about</div>
			<div class="content-detail">detail</div>
		</div>
		
		
		
		
		
		
		
		<script>
			$(function(){
				$(".navtop>div").each(function(index,el){
					switch(index) {
					     case 0:						 
					       $(this).click(function(){
							   $(".content-home").css("margin-left","0px")
							   $(".scolltop").css("left","5px")
						   })
					        break;
					     case 1:
					        $(this).click(function(){
					        	 $(".content-home").css("margin-left","-300px")
								    $(".scolltop").css("left","105px")
					        })
					        break;
						 case 2:
							  $(this).click(function(){
							  	 $(".content-home").css("margin-left","-600px")
								    $(".scolltop").css("left","205px")
							  })
							   break;
					     default:
					      
					} 
				})
			})
		</script>
	</body>
</html>
